<template>
  <div id="sliderContainer" class="slider-container">
    <div v-show="showLeft" id="leftSlider" class="left-slider" :style="{ width: leftSliderWidth + '%' }">
      <slot name="left"></slot>
    </div>
    <div
      v-show="showLeft && showRight"
      id="sliderLine"
      class="slider-line"
      :style="{ height: height, left: leftSliderWidth + '%' }"
    ></div>
    <div
      v-show="showRight"
      id="rightSlider"
      class="right-slider"
      :style="{ width: 'calc(' + (100 - leftSliderWidth) + '% - 0px)' }"
    >
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  name: 'SliderContainer',
  components: {},
  props: {
    height: {
      type: String,
      default: '100vh',
    },
  },
  data() {
    return {
      sliderContainer: null,
      leftSlider: null,
      rightSlider: null,
      slider: null,
      leftSliderWidth: '37.5',

      showLeft: true,
      showRight: true,
    }
  },

  created() {
    this.changeLeftSliderWidth()
  },
  mounted() {
    this.init()

    window.addEventListener('resize', this.onWindowResize, false)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onWindowResize, false)
  },
  beforeUpdate() {
    const { left, right } = this.$slots
    this.showLeft = Boolean(left && left.length)
    this.showRight = Boolean(right && right.length)
    this.changeLeftSliderWidth()
    // console.log('SlideContainer', this.$slots, { left: this.showLeft, right: this.showRight })
  },

  methods: {
    changeLeftSliderWidth() {
      const { showLeft, showRight } = this
      if (showLeft && !showRight) {
        this.leftSliderWidth = 100
      } else if (!showLeft && showRight) {
        this.leftSliderWidth = 0
      } else {
        this.leftSliderWidth = Cookies.get('leftSliderWidth') || '37.5'
      }
    },
    getElementById(id) {
      return document.getElementById(id)
    },
    init() {
      this.sliderContainer = this.getElementById('sliderContainer')
      this.leftSlider = this.getElementById('leftSlider')
      this.rightSlider = this.getElementById('rightSlider')
      this.slider = this.getElementById('sliderLine')

      let _this = this
      this.slider.onmousedown = function (e) {
        let disX = (e || window.event).clientX
        _this.slider.left = _this.slider.offsetLeft
        document.onmousemove = function (e) {
          _this.sliderResize((e || window.event).clientX, disX)
          return false
        }
        document.onmouseup = function () {
          document.onmousemove = null
          document.onmouseup = null
          _this.setSliderCookie(_this.leftSlider.style.width)
          _this.$emit('content-resize')
        }
        return false
      }
    },
    sliderResize(clientX, disX) {
      let iT = this.slider.left + (clientX - disX)
      let maxT = this.sliderContainer.clientWidth - this.slider.offsetWidth
      iT < 0 && (iT = 0)
      iT > maxT && (iT = maxT)
      if (this.sliderContainer.clientWidth - iT < this.slider.offsetWidth) {
        return false
      }
      this.slider.style.left = this.leftSlider.style.width = iT + 'px'
      this.rightSlider.style.width = this.sliderContainer.clientWidth - iT - this.slider.offsetWidth + 'px'
    },
    onWindowResize() {
      // this.slider.left = this.slider.offsetLeft;
      // this.sliderResize(0, 0);
      let leftScale =
        this.leftSlider.offsetWidth /
        (this.leftSlider.offsetWidth + this.rightSlider.offsetWidth + this.slider.offsetWidth)
      this.slider.style.left = this.leftSlider.style.width = leftScale * this.sliderContainer.clientWidth + 'px'
      this.rightSlider.style.width =
        this.sliderContainer.clientWidth - this.leftSlider.offsetWidth - this.slider.offsetWidth + 'px'
      this.setSliderCookie(this.leftSlider.style.width)
    },
    setSliderCookie(width) {
      width = (width + '').replace('px', '')
      Cookies.set('leftSliderWidth', (width / this.sliderContainer.clientWidth).toFixed(4) * 100, { expires: 365 })
    },
  },
}
</script>
<style lang="scss" scoped>
.slider-container {
  // position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .left-slider {
    float: left;
    width: 37.5%;
    height: 100%;
    overflow: hidden;
  }
  .right-slider {
    float: right;
    width: calc(62.5% - 6px);
    overflow: hidden;
  }
  .slider-line {
    position: absolute;
    top: 0;
    left: 37.5%;
    overflow: hidden;
    border-width: 0 3px 0 3px;
    border-color: #939699;
    border-style: double;
    background: #ddd;
    cursor: w-resize;
    z-index: 999;
  }
}
</style>
